<script>
export default {
  name: "global-card",
  components: {},
  data() {
    return {
      mainTitle: '新建方案'
    }
  },
  computed: {
  },
  watch: {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  methods: {
  },
};
</script>

<template>
  <div class="global-card">
    <div class="header">
      <div class="main-title">
        <span>{{ mainTitle }}</span>
      </div>
    </div>
    <div class="body">
      MAIN
    </div>
  </div>
</template>
<style lang="less" scoped>
.global-card {
  position: fixed;
  top: 15rem;
  left: 3.5rem;
  border-radius: .5rem;
  background-color: rgba(37, 74, 102, 0.45);
  color: #ECF5FD;

  &>.header {
    width: 88rem;
    height: 8.4rem;
    background-image: url(./images/main-header.svg);
    background-size: 100% 100%;
    &>.main-title {
      height: 100%;
      // border: 1px solid red;
      font-size: 3.6rem;
      display: inline-flex;
      align-items: center;
      padding-left: 8rem;
    }
  }
  &>.body {
    position: relative;
    font-size: 40px;
    height: 300px;
    &::before {
      position: absolute;
      content: " ";
      z-index: -1;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(4px);
    }
  }
}
</style>